(function() {
if (document.readyState !== 'loading') {
    init();
} else {
    document.addEventListener('DOMContentLoaded', init);
}

function init() {
    const tabId = 'group_perm_manage';
    const container = document.querySelector(`[data-tab-id="${tabId}"]`);

    function getCsrfToken() {
      const cookies = document.cookie.split(';');
      for (let cookie of cookies) {
        const [name, value] = cookie.trim().split('=');
        if (name === 'csrftoken') return decodeURIComponent(value); //
      }
      return null;
    }
    const headers = {
        'Authorization': 'Bearer ' + localStorage.getItem('access'),
        'Content-Type': 'application/json',
        'X-CSRFToken': getCsrfToken()
    }

    const el = container.querySelector('.btn.btn-outline-primary.btn-sm.ms-2.fw-bold');
    let groups_group_perm = JSON.parse(container.querySelector('#groupsData').textContent);

    let groupId = null
    let oldSpanPublic, oldGroupPublic

    // 在所有Tab页面创建相同的频道
    const bc = new BroadcastChannel('data_update_channel');

    // 监听其他Tab的消息
    // bc.addEventListener('message', (event) => {
    //   if (event.data.type === 'data_updated') {
          // console.log('其他tab有改变数据:', event.data.payload)
        // updateLocalData(event.data.payload);
      // }
    // });

    // 监听点击事件
    container.addEventListener('click', function(e) {
        // 1. 组选择监听:组有改变则同时修改权限选择框
        try {
            container.querySelector('#groupList_gpm').addEventListener('change', function (e) {
                // 先清空权限选项
                clearPermissions()
                groupId = parseInt(e.target.id.replace('gpm_group_', ''));
                // 勾选组权限(排除掉"新增组")
                try {
                    // 在数组中查找匹配项
                    const targetGroup = groups_group_perm.find(group => group.id === groupId);
                    // 提取权限列表（若存在）
                    const newList = targetGroup ? targetGroup.permissions.map(item => item[1]) : [];
                    modifyGroupsPerm(newList)
                } catch (error) {
                    console.log('有错误:', error)
                } finally {
                }
            })
        } catch {
        }

        // 2. 监听权限复选框被点击时
        if (e.target.closest('#scroll-container_gpm')) {
        if (!groupId) {
            e.target.checked = !e.target.checked;
            showToast('还未选中组', 'warning');
            return
        }
        const currentCheckbox = e.target;
        const currentValue = currentCheckbox.value;
        if (!currentValue) return;  // 排除掉label标签
        const isChecked = currentCheckbox.checked;
        // 选择所有同类复选框（根据实际类名调整选择器）
        const allCheckboxes = container.querySelectorAll('.gpm_radio_input');
        // ====== 向下传播 ======
        const childPrefix = currentValue + '.';
        allCheckboxes.forEach(checkbox => {
            if (checkbox.value.startsWith(childPrefix)) {
                checkbox.checked = isChecked;
            }
        });
        // ====== 向上递归所有祖先 ======
        const ancestors = getAllAncestorValues(currentValue);
        ancestors.forEach(ancestorValue => {
            updateAncestorState(ancestorValue, isChecked, allCheckboxes);
        });
    }

        // 3. 监听"新增组"点击时
        if (e.target.closest('.btn.btn-outline-primary.btn-sm.ms-2.fw-bold')) {
            // 0. 检查是否已有新增行（通过特定类名标识，如 'new-editing'）
            if (e.target.dataset.newEditing === 'new') {
                showToast('先处理正在编辑的内容', 'warning');
                return;
            }
            // 恢复其他编辑行
            if (el.dataset.groupNameId) {
                cancel_new_edit(el.dataset.groupNameId)
            }

            // 先清空权限选项
            clearPermissions()
            const newGroupId = Date.now(); // 使用时间戳作为唯一 ID
            const newGroupName = '新组名';

            // 创建两个基础元素:一个显示组名用,一个显示按钮组(编辑和删除)
            oldSpanPublic = document.createElement('span');
            oldSpanPublic.id = `groupName_${newGroupId}`
            oldSpanPublic.className = 'group-name text-truncate pe-2';
            oldSpanPublic.style = "max-width: 150px;"
            oldSpanPublic.textContent = newGroupName          // span显示的内容

            oldGroupPublic = createButtonGroup(newGroupId)    // 按钮组:编辑和删除

            addGroup(e, newGroupId, newGroupName);
        }

        // 3-1.保存"新增组"或"本行编辑"
        if (e.target.closest('.save-new')) {
            const userId = e.target.closest('.save-new').dataset['userid']
            const rows = container.querySelectorAll('.list-group-item.d-flex.align-items-center');
            const row = Array.from(rows).find(element => element.dataset.userid === userId);
            const groupName = row.querySelector('.group-name').value
            const data = {
                id: parseInt(userId.split('_')[1]), // 确保id是数字
                name: groupName
            }
            // 声明异步操作开始，保持消息通道开放（仅适用于扩展环境）
            let keepChannelAlive = true;
            fetch('/acc/rbac/group_name/manage/', {
                method: 'POST',
                headers: headers,
                credentials: 'include', // 强制携带 Cookie
                body: JSON.stringify(data)
            })
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(errData => {
                            throw new Error(errData.message || '未知错误')
                        }); // 将错误对象抛出到 catch
                    }
                    return response.json(); // 如果成功，继续处理
                })
                .then(data => {
                    // 查找匹配项
                    const foundIndex = groups_group_perm.findIndex(item => item.id === data['group_id']);
                    if (foundIndex !== -1) {
                      groups_group_perm[foundIndex].name = data['group_name'];
                    } else {
                      groups_group_perm.push({id: data['group_id'], name: data['group_name'], permissions: []});
                    }
                    // 通知其他tab去同步数据
                    bc.postMessage({
                        type: 'data_updated',
                        payload: {"groups_perm": groups_group_perm}
                    });
                    // 检查DOM元素是否仍存在
                    if (container.contains(row)) {
                        // 恢复编辑行
                        el.dataset.newEditing = ''
                        oldSpanPublic.textContent = groupName
                        const userId = e.target.closest('button').dataset.userid;
                        showToast('操作成功!', 'success')
                        cancel_new_edit(userId)
                    } else {
                        console.warn('DOM元素已卸载，跳过更新');
                    }
                })
                .catch(error => {
                    showToast(error.message, 'error')
                }) // 统一处理错误
                .finally(() => {
                    keepChannelAlive = false;
                });   // 允许通道关闭
            // 显式返回true（仅适用于扩展监听器）
            return true;
        }

        // 3-2. 作废"新增组"或"本行编辑"
        if (e.target.closest('.cancel-new')) {
            const userId = e.target.closest('button').dataset.userid;
            cancel_new_edit(userId)
        }

        // 4. 本行编辑
        if (e.target.closest('.gpm_edit-btn')) {
            // 先恢复其他编辑行
            if (el.dataset.groupNameId) {
                cancel_new_edit(el.dataset.groupNameId)
            }
            const userId = e.target.closest('button').dataset.userid;
            const group_id = userId.split('_')[1];
            if (groups_group_perm.filter(g => parseInt(g.id) === parseInt(group_id))[0]['name'] === '超级权限'){
                showToast('[超级权限]必须保留,不能编辑!', 'warning')
                return
            }
            // 标记正在编辑(标记于"新建组"里)
            el.dataset.newEditing = 'edit'
            el.dataset.groupNameId = userId

            const span = container.querySelector(`#${userId}`);
            oldSpanPublic = span
            const oldElement = container.querySelectorAll('.btn-group');
            const oldGroup = Array.from(oldElement).find(element => element.dataset.userid === userId);
            oldGroupPublic = oldGroup

            const input = document.createElement('input');
            input.type = 'text';
            input.value = span.textContent.trim();
            input.className = 'group-name text-truncate pe-2';
            input.id = userId.replace('groupName_', 'gpm_group_');
            input.style = 'border: 2px solid #90CAF9; border-radius: 8px !important; border-color: #90CAF9; outline: none !important;';

            // 创建按钮组
            const btnGroup = groups_btn(userId.split('_')[1])
            // 更换为编辑状态
            oldGroup.replaceWith(btnGroup);
            span.replaceWith(input);
            input.focus();
        }
        // 4-1.本行保存(与"新增组"的保存公用一个函数)
        // 4-2.本行作废(与"新增组"的作废公用一个函数)

        // 5 删除操作(html上的删除)
        if (e.target.closest('.delete-btn')) {
        const userId = e.target.closest('.delete-btn').dataset.userid
        const group_id = userId.split('_')[1];
        const rows = container.querySelectorAll('.list-group-item.d-flex.align-items-center');
        const row = Array.from(rows).find(element => element.dataset.userid === userId);
        if (groups_group_perm.filter(g => parseInt(g.id) === parseInt(group_id))[0]['name'] === '超级权限'){
            showToast('[超级权限]必须保留,不能删除!', 'warning')
            return
        }
        // 高亮目标行(list-group-highlight为自定义样式)
        row.classList.add('list-group-highlight')
        const modal = new bootstrap.Modal('#deleteConfirmModal_gpm');
        modal.show();
        // 监听删除模态框的id='confirmDelete'
        container.querySelector('#confirmDelete').onclick = () => {
           try {
               fetch(`/acc/rbac/group_delete/manage/${group_id}/`, {
                   method: 'DELETE',
                   headers: headers
               })
               .then(response => {
                   if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
                   return response.json();
               })
               .then(data => {
                   modal.hide();
                   el.dataset.newEditing = 'new';
                   cancel_new_edit(userId);
                   // 同步本地被删除的数据
                    groups_group_perm = groups_group_perm.filter(item => item.id !== data.group_id);
                    // 通知其他tab去同步数据
                    bc.postMessage({
                        type: 'data_updated',
                        payload: {"groups_perm": groups_group_perm}
                    });

               })
               .catch(error => {
                   showToast('删除失败: ' + error.message, 'error');
               });
           } catch (syncError) {
               showToast('请求配置错误: ' + syncError.message, 'error');
           }

        };
        // 监听模态框关闭事件（取消操作,取消高亮）
        modal._element.addEventListener('hidden.bs.modal', () => {
            row.classList.remove('list-group-highlight');
        });
    }

        // 6. 确认配置
        if (e.target.closest('#confirmBtn')) {
            if (!groupId) {
                showToast('还未选中组', 'warning');
                return
            }
            // 取组名
            const rows = container.querySelectorAll('.list-group-item.d-flex.align-items-center');
            const row = Array.from(rows).find(element => element.dataset.userid === 'groupName_' + groupId);
            const groupInputSpan = row.querySelector('.group-name')
            let groupName = ''
            if (groupInputSpan) {
                switch (groupInputSpan.tagName) {
                    case "SPAN":
                        groupName = groupInputSpan.textContent
                        break
                    case "INPUT":
                        groupName = groupInputSpan.value
                        break
                }
            } else {
                showToast('组名位置不正确!', "warning")
            }

            // 筛选出已勾选的权限(包括一,二,三级)
            const selectedPermissionsId = getSelectedPermissions();

            // 请求后端更新或者新增这个组的权限
            updateGroupPermissions(groupId, selectedPermissionsId, groupName).then();
        }

  });

    // 1.0 清空权限选项
    function clearPermissions() {
            const selectors = ['.gpm-checkbox-1', '.gpm-checkbox-2', '.gpm-checkbox-3'];
            selectors.forEach(selector => {
                container.querySelectorAll(selector).forEach(checkbox => {
                    checkbox.checked = false;
                    checkbox.dataset.displayToggle = '';
                    checkbox.style.backgroundColor = '';
                });
            });
        }

    // 1.1 勾选关联的组权限
    function modifyGroupsPerm(group_permissions) {
        // 所有权限相关的input元素
        const inputs = container.querySelectorAll('.gpm-checkbox-1, .gpm-checkbox-2, .gpm-checkbox-3');
        inputs.forEach(checkbox => {
            const count = group_permissions.filter(item => item === checkbox.value).length;  // 检查完全匹配的总共有几个
            if (count > 0) {
                checkbox.checked = true;
            } else {
                if (isNodeExistRegex(group_permissions, checkbox.value)) {
                    checkbox.checked = true;  // 补勾选一级,二级权限
                }
            }
        });
    }

    // 1.2 匹配权限是否存在已选列表中(主要检查一级和二级权限,补选中)
    function isNodeExistRegex(list, target) {
        const pattern = new RegExp(`(^|\\.)${target}(\\.|$)`); // 匹配以点分隔的节点
        return list.some(element => pattern.test(element));
    }

    // 2.1 辅助函数：获取所有祖先value（包括父级、爷爷级等）
    function getAllAncestorValues(value) {
        const parts = value.split('.');
        return parts.slice(0, -1).map((_, i) =>
            parts.slice(0, i + 1).join('.')
        ).reverse(); // 从直接父级向根级排序
    }

    // 2.2 核心递归逻辑
    function updateAncestorState(ancestorValue, isChecked, allCheckboxes) {
        const ancestorCheckbox = findCheckboxByValue(ancestorValue);
        if (!ancestorCheckbox) return;

        // 获取所有直接子节点（仅下一层级）
        const directChildren = Array.from(allCheckboxes).filter(checkbox => {
            const childValue = checkbox.value;
            return childValue.startsWith(ancestorValue + '.') &&
                !childValue.slice(ancestorValue.length + 1).includes('.');
        });

        // 判断是否满足取消条件
        const shouldUncheck = directChildren.every(child => !child.checked);
        ancestorCheckbox.checked = !shouldUncheck;

        // 继续递归处理上级祖先
        const parentValue = ancestorValue.split('.').slice(0, -1).join('.');
        if (parentValue) {
            updateAncestorState(parentValue, isChecked, allCheckboxes);
        }
    }

    // 2.3 取得相同value的input框
    function findCheckboxByValue(value) {
        return container.querySelector(`input[value="${value}"]`);
    }

    // 3.1 添加组的函数
    function addGroup(e, groupId, groupName) {
        e.target.dataset.newEditing = 'new'
        e.target.dataset.groupNameId = 'groupName_' + groupId
        const newGroup = createGroupElement(groupId, groupName);

        const groupList = container.querySelector('#groupList_gpm');
        groupList.insertBefore(newGroup, groupList.firstChild);
    }

    // 3.2 创建新组元素
    function createGroupElement(groupId, groupName) {
        // 1. 创建容器 div（id="groupList_gpm"），设置类和内联样式
        const groupListDiv = document.createElement('div');
        groupListDiv.className = 'group-list list-group list-group-flush';
        groupListDiv.id = 'groupList_gpm';
        groupListDiv.style.whiteSpace = 'nowrap';      // 强制单行显示，避免换行（参考 Evidence 1）[[1]]
        groupListDiv.style.overflowX = 'hidden';       // 隐藏水平溢出内容（参考 Evidence 1）[[1]]
        groupListDiv.style.fontSize = 'calc(1rem * 0.95)'; // 字体大小缩放

        // 创建列表项 div（类="list-group-item d-flex align-items-center"）
        const listItem = document.createElement('div');
        listItem.className = 'list-group-item d-flex align-items-center';
        listItem.setAttribute('data-userid', `groupName_${groupId}`); // 设置 data-userid 属性

        // 创建 form-check div（类="form-check flex-grow-1"）
        const formCheck = document.createElement('div');
        formCheck.className = 'form-check flex-grow-1';

        // 创建单选按钮 input（类="form-check-input group-radio gpm_radio_input"）
        const radioInput = document.createElement('input');
        radioInput.type = 'radio';
        radioInput.className = 'form-check-input group-radio gpm_radio_input';
        radioInput.value = groupId;
        radioInput.id = `gpm_group_${groupId}`;
        radioInput.name = 'groupList_gpm'; // 所有单选按钮共享相同 name，实现互斥
        radioInput.checked = true;

        // 创建 label（类="form-check-label d-flex justify-content-between align-items-center w-100"）
        const label = document.createElement('label');
        label.className = 'form-check-label d-flex justify-content-between align-items-center w-100';
        label.htmlFor = `gpm_group_${groupId}`; // 关联单选按钮的 id

        // 创建左侧区域：徽章 + 组名（使用 span 包裹）
        const leftSpan = document.createElement('span');
        leftSpan.className = 'd-flex align-items-center';

        // 创建徽章（类="badge bg-success btn-sm custom-gap"），文本为"组"
        const badge = document.createElement('span');
        badge.className = 'badge bg-success btn-sm custom-gap';
        badge.textContent = '组'; // 徽章文本固定为"组"

        // 创建组名 input（id="groupName_<id>"，类="group-name text-truncate pe-2"）
        const groupNameInput = document.createElement('input');
        groupNameInput.type = 'text';
        groupNameInput.className = 'group-name text-truncate pe-2';
        groupNameInput.style = 'border: 2px solid #90CAF9; border-radius: 8px !important; border-color: #90CAF9; outline: none !important;'
        groupNameInput.style.maxWidth = '150px'; // 限制最大宽度，确保截断
        groupNameInput.value = groupId;
        groupNameInput.id = `gpm_group_${groupId}`;
        groupNameInput.value = '';
        groupNameInput.focus();

        // 将徽章和组名添加到左侧区域
        leftSpan.appendChild(badge);
        leftSpan.appendChild(groupNameInput);

        // 按钮组
        const btnGroup = groups_btn(groupId)

        // 将左侧和右侧区域添加到 label
        label.appendChild(leftSpan);
        label.appendChild(btnGroup);

        // 将单选按钮和 label 添加到 form-check div
        formCheck.appendChild(radioInput);
        formCheck.appendChild(label);

        // 将 form-check 添加到列表项
        listItem.appendChild(formCheck);

        // 将列表项添加到容器 div
        groupListDiv.appendChild(listItem);

        return groupListDiv
    }

    // 3.2-1 作废操作
    function cancel_new_edit(userId) {
        const rows = container.querySelectorAll('.list-group-item.d-flex.align-items-center');
        const row = Array.from(rows).find(element => element.dataset.userid === userId);
        if (el.dataset.newEditing === 'new') {   // "新增组"作废
            el.dataset.newEditing = ''
            el.dataset.groupNameId = ''
            groupId = null
            row.remove();
            clearPermissions()
        } else {                              // "本行编辑"作废 或 "保存"以后恢复原样
            const input = row.querySelector('input.group-name');
            const oldGroup = row.querySelector('span.btn-group');
            input.replaceWith(oldSpanPublic);
            oldGroup.replaceWith(oldGroupPublic);
            el.dataset.newEditing = ''
            el.dataset.groupNameId = ''
        }
    }

    // 3.3 创建按钮组(保存和作废)
    function groups_btn(groupId) {
        // 创建外层容器（btn-group）
        const btnGroup = document.createElement('span');
        btnGroup.className = 'btn-group btn-group-wrap ms-auto';
        btnGroup.dataset.userid = `groupName_${groupId}`; // 第一处data-userid

        const editBtn = document.createElement('button');
        editBtn.className = 'btn btn-success btn-sm save-new';
        editBtn.title = '保存';
        editBtn.style.fontSize = "12px";
        editBtn.innerHTML = '<i class="fas fa-save" ></i>';
        editBtn.dataset.userid = `groupName_${groupId}`

        const deleteBtn = document.createElement('button');
        deleteBtn.className = 'btn btn-danger btn-sm cancel-new';
        deleteBtn.title = '作废';
        deleteBtn.style.fontSize = "12px";
        deleteBtn.innerHTML = '<i class="fas fa-times"></i>';
        deleteBtn.dataset.userid = `groupName_${groupId}`

        // 添加按钮到按钮组
        btnGroup.appendChild(editBtn);
        btnGroup.appendChild(deleteBtn);

        return btnGroup
    }

    // 3.4 创建按钮组(编辑和删除)
    function createButtonGroup(groupId) {
        // 创建外层容器（btn-group）
        const buttonGroup = document.createElement('span');
        buttonGroup.className = 'btn-group btn-group-wrap ms-auto';
        buttonGroup.dataset.userid = `groupName_${groupId}`; // 第一处data-userid

        // 创建编辑按钮
        const editButton = document.createElement('button');
        editButton.className = 'btn btn-sm btn-outline-primary gpm_edit-btn';
        editButton.title = '编辑';
        editButton.style.fontSize = '12px';
        editButton.innerHTML = '<i class="fas fa-edit"></i>';
        editButton.dataset.userid = `groupName_${groupId}`; // 第二处data-userid

        // 创建删除按钮
        const deleteButton = document.createElement('button');
        deleteButton.className = 'btn btn-sm btn-outline-danger delete-btn';
        deleteButton.title = '删除';
        deleteButton.style.fontSize = '12px';
        deleteButton.innerHTML = '<i class="fas fa-trash"></i>';
        deleteButton.dataset.userid = `groupName_${groupId}`; // 第三处data-userid

        // 组装元素
        buttonGroup.appendChild(editButton);
        buttonGroup.appendChild(deleteButton);

        return buttonGroup;
    }

    // 6.1 筛选出已勾选的权限列表
    function getSelectedPermissions() {
        // 1. 获取容器内所有复选框
        const containerCheck = container.querySelector('.col-12.col-lg-8');
        const checkboxes = containerCheck.querySelectorAll('input[type="checkbox"].gpm_radio_input');
        // 2. 筛选并收集选中项的值
        const selectedId = [];
        // const selectedValue = []
        checkboxes.forEach(checkbox => {
            if (checkbox.checked) {
                // 获取权限标识值
                selectedId.push(parseInt(checkbox.id.replace('gpm_perm_', '')));
                // selectedValue.push(checkbox.value);
            }
        });

        return selectedId
    }

    // 6.2 请求后端更新或者新增这个组的权限
    async function updateGroupPermissions(groupId, permissionIds, groupName) {
        const url = `/acc/rbac/groups/${groupId}/permissions/`
        // 构造符合Django要求的请求体
        const payload = {permissions: permissionIds.map(id => Number(id))};  // 确保整数格式
        payload.groupName = groupName
        try {
            const response = await fetch(url, {
                method: 'PUT',
                headers: headers,
                credentials: 'include', // 强制携带 Cookie
                body: JSON.stringify(payload)
            })
            if (!response.ok) {
                const errorData = await response.json();
                throw new Error(errorData.message); // 抛出含错误信息的异常
            }
            const result = await response.json();
            showToast('操作成功', 'success');
            // 查找目标对象的索引
            const index = groups_group_perm.findIndex(group => group.id === groupId);
            if (index !== -1) {
                // 如果找到，直接更新permissions
                groups_group_perm[index].permissions = result.permissions;
            } else {
                // 如果没找到，添加新对象
                groups_group_perm.push({
                    id: groupId,
                    name: result.groupName,
                    permissions: result.permissions
                });
            }
            // 通知其他tab去同步数据
            bc.postMessage({
                type: 'data_updated',
                payload: {"groups_perm": groups_group_perm}
            });
            // 恢复编辑行为正常状态
            if (el.dataset.groupNameId) {
                el.dataset.newEditing = ''
                oldSpanPublic.textContent = groupName
                cancel_new_edit(el.dataset.groupNameId)
            }

            return result;
        } catch (error) {
            showToast(error.message, 'error');
        }
    }

    // 显示小模态框时触发自动关闭
    // function showWarningModal(message) {
    //     const modalEl = container.querySelector('#warningModal_gpm');
    //     const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
    //     container.querySelector('#dynamicMessage_gpm').textContent = message;
    //     modal.show();
    //
    //     // 设置定时器，3秒后自动关闭
    //     let hideTimer = setTimeout(() => {
    //         modal.hide();
    //     }, 3000);
    //
    //     // 点击模态框任意位置关闭（一次性事件，避免重复）
    //     const hideHandler = () => {
    //         modal.hide();
    //         clearTimeout(hideTimer); // 清除定时器
    //         modalEl.removeEventListener('click', hideHandler); // 移除自身
    //     };
    //     modalEl.addEventListener('click', hideHandler);
    // }

}
})();